<template>
  <div>
    <div class="contain">
      <div class="left" :class="left" ref="left">
        <div class="Logo">
          <div :class="logoName">SSES</div>
          <div class="name" v-show="naveLeft">管理系统知识模块</div>
        </div>

        <!-- 左侧边栏 -->
        <div class="menu">
          <div v-for="item in menuList">
            <div
              class="menuInner"
              v-if="
                item.childrenList.length > 0 &&
                item.childrenList[0].name !== '新增' &&
                item.childrenList[0].name !== '编辑' &&
                item.childrenList[0].name !== '删除' &&
                item.childrenList[0].name !== '查看'
              "
            >
              <div class="menu1Class" :class="menu" data-text="1">
                <el-icon
                  :size="iconSize"
                  class="indexIcon"
                  v-show="changeIconShow"
                >
                  <component :is="item.icon"></component>
                </el-icon>
                <div class="navName" v-show="naveLeft">
                  {{ item.name }}
                </div>
                <div
                  v-show="naveLeft"
                  style="
                    height: 100;
                    display: flex;
                    align-items: center;
                    margin-left: 25px;
                  "
                ></div>
              </div>
              <div class="child" :class="changeLeft" style="display: none">
                <div
                  style="width: 175px"
                  :data-text="item.name"
                  v-for="it in item.childrenList"
                  @click="clickNavName($event)"
                >
                  <div
                    class="childSon"
                    :data-text="JSON.stringify(it.childrenList)"
                  >
                    {{ it.name }}
                  </div>
                  <div
                    class="grandSonInner"
                    v-if="
                      it.childrenList.length > 0 &&
                      (it.childrenList[0].name != '查看' ||
                        it.childrenList[0].name != '新增')
                    "
                    style="display: none"
                  >
                    <div
                      class="grandSon"
                      v-for="t in it.childrenList"
                      @click.stop=""
                      :data-text="JSON.stringify(t.childrenList)"
                    >
                      {{ t.name }}
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="menu1Class" :class="menu" :data-text="item.path" v-else>
              <el-icon
                :size="iconSize"
                class="indexIcon"
                v-show="changeIconShow"
              >
                <component :is="item.icon"></component>
              </el-icon>
              <div class="navName" v-show="naveLeft">{{ item.name }}</div>
            </div>
          </div>
        </div>

        <!-- 做侧边栏结束 -->
      </div>
      <div class="rigth" ref="right">
        <div class="rightTop">
          <div class="topLeft">
            <div class="changeButton" @click="changeSize">
              <el-icon size="25"> <component :is="icon"></component></el-icon>
            </div>
            <div class="NavChangeName" v-show="changeLeftSize">
              {{ navName }}
            </div>
          </div>
          <div class="topRight">
            <div class="avater" @click="quit()">
              <div class="pic">
                <img src="@/assets/img/img.png" alt="" />
              </div>
              <div class="userName">
                {{ userName }} <el-icon size="15"><ArrowDown /></el-icon>
              </div>
            </div>
            <div v-show="showQuit" class="quit" ref="quit" @click="clickQuit()">
              退出
            </div>
          </div>
        </div>
        <div class="rightInner">
          <router-view :key="$route.path"></router-view>
          <!-- <router-view v-else></router-view> -->
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import { store } from "vuex";
import $ from "jquery";
import { ElMessage } from "element-plus";
import service from "@/api/api.js";
import EventBus from "@/mitt/eventBus.js";

import zhCn from "element-plus/es/locale/lang/zh-cn";

export default {
  data() {
    return {
      changeIconShow: false,
      logoName: "logoName",
      showIndexIcon: false,
      logoSize: "30px",
      locale: zhCn,
      navName: "首页",
      userName: "",
      left: "left1",
      naveLeft: true,
      menuList: [],
      iconList: [
        { name: "首页", icon: "House" },
        { name: "日常作业数据", icon: "Document" },
        { name: "作业统计数据", icon: "Memo" },
        { name: "受注船", icon: "Box" },
        { name: "加注船", icon: "Calendar" },
        { name: "作业数据库", icon: "SuitcaseLine" },
        { name: "自主查询", icon: "ZoomIn" },
        { name: "系统管理", icon: "Tools" },
        { name: "作业记录", icon: "Tickets" },
        { name: "新增作业", icon: "CirclePlus" },
      ],
      tableData: [],
      changeLeftSize: true,
      changeName: "",
      icon: "Fold",
      showQuit: false,
      menu: "menu1",
      iconSize: 15,
      changeLeft: "child1",
      page: 1,
      size: 15,
      pageList: [],
      show: "none",
      addOrEdit: "新增",
      currentNum: 0,
      endDate: "",
      fillPeople: "",
      filledShip: "",
      homeworkLocation: "",
      homeworkMonth: "",
      homeworkNum: "",
      imi_MMBtu: "",
      imi_volume: "",
      imi_weight: "",
      includeFlag: "",
      tableWidth: null,
      serialNumber: "",
      shipownerPeople: "",
      startDate: "",
      totalPages: null,
      id: "",
      uploadfile: true,
      data: {
        endDate: "",
        fillPeople: "",
        filledShip: "",
        homeworkLocation: "",
        homeworkMonth: "",
        homeworkNum: "",
        imi_MMBtu: "",
        imi_volume: "",
        imi_weight: "",
        includeFlag: "",
        serialNumber: "",
        shipownerPeople: "",
        startDate: "",
        id: "",
      },

      show1: "none",
      color: "#EBEBEB",
      color1: "#94D474",
      file: null,
      fileName: "",
      activedLine: "",
    };
  },
  methods: {
    customIndex(index) {
      return (this.page - 1) * this.size + index + 1;
      // 自定义序号显示，比如增加分页后的偏移量
      // return (this.page - 1) * this.size + index + 1;
    },

    formatDate(row, column) {
      // 获取单元格数据

      let data = row[column.property];

      if (data == null) {
        return null;
      }
      let date = new Date(data);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      return `${year}/${month}/${day}`;
    },
    getPathTo(a) {
      this.$router.push(`/${a}`);
    },

    changeSize() {
      let width = window.innerWidth;
      try {
        if (width < 630) {
          if (this.icon == "Fold") {
            this.iconSize = 30;
            this.fontSize = 30;
            this.icon = "Expand";

            this.logoSize = "20px";
            $(".changeButton").css({
              position: "relative",
              left: "0px",
              top: 0,
            });
            $(".NavChangeName").css({
              position: "relative",
              left: "0px",
              top: 0,
            });
            $(".left").fadeOut();
            $(".child").hide();
            let img = $(".img");

            this.$store.state.width = 90;
          } else {
            this.icon = "Fold";
            this.logoSize = "0px";

            this.fontSize = 30;
            $(".changeButton").css({
              position: "absolute",
              left: "170px",
              top: "20px",
            });
            $(".NavChangeName").css({
              position: "absolute",
              left: "220px",
              top: "20px",
            });
            $(".left").fadeIn();

            this.$store.state.width = 200;
          }
        } else {
          if (this.icon == "Fold") {
            this.iconSize = 30;
            this.fontSize = 20;
            this.changeIconShow = true;
            this.logoName = "logoName1";
            this.icon = "Expand";
            this.menu = "menu2";
            this.left = "left2";
            this.changeLeft = "child2";
            this.naveLeft = false;
            this.$store.state.width = 90;
            $(".child").hide();
          } else {
            this.icon = "Fold";
            this.menu = "menu1";
            this.logoName = "logoName";
            this.changeIconShow = false;
            this.iconSize = 20;
            this.fontSize = 30;
            this.left = "left1";
            this.$store.state.width = 200;
            this.changeLeft = "child1";
            this.naveLeft = true;
            $(".child").hide();
            let img = $(".img");

            // for (let i = 0; i < img.length; i++) {
            //   img[i].src = up;
            // }
          }
        }
      } catch (error) {}
    },
    uploadFile() {
      this.uploadfile = "block";
    },
    getFile(event) {
      this.file = event.target.files[0];
      this.fileName = this.file.name;
    },
    submitAddFile() {
      if (this.file) {
        let data = {
          file: this.file,
        };
        service({
          method: "post",
          url: "/load-data/upload",
          headers: {
            "Content-Type": "multipart/form-data",
          },
          data: data,
        })
          .then((res) => {
            this.$message({
              message: "上传成功",
              type: "success",
            });
            this.file = "";
            this.fileName = "";
            this.uploadfile = "none";
          })
          .catch((err) => {
            this.$message({
              message: err,
              type: "fail",
            });
          });
      } else {
        this.$message({
          message: "请先选择文件再上传",
          type: "warning",
        });
      }
    },

    // 获取列表数据
    removeColor() {
      let grandSon = $(".grandSon");

      for (let i = 0; i < grandSon.length; i++) {
        grandSon[i].style.background = "#0470C1";
      }

      let childSon = $(".childSon");
      for (let i = 0; i < childSon.length; i++) {
        childSon[i].style.background = "#0470C1";
      }

      let menu = $(".menu1");
      for (let i = 0; i < menu.length; i++) {
        menu[i].style.background = "#0470C1";
      }

      let menu1 = $(".menu2");
      for (let i = 0; i < menu1.length; i++) {
        menu1[i].style.background = "#0470C1";
      }
    },
    clickNavName(a) {
      this.changeNaveColor(a.target);
      let secondMenu = false;
      let p = $(a.target).attr("data-text");

      if (p) {
        p = JSON.parse(p);

        p.forEach((item) => {
          if (item.name == "查看") {
            secondMenu = true;
            p = item;
          }
        });
        if (secondMenu == true) {
          // this.$router.push("/" + p.path);
          this.$router.replace({
            path: "/" + p.path,
            query: { t: Date.now() },
          });
        } else {
          if ($(a.target).next()[0].style.display == "block") {
            // $(a.target).next().slideUp();、

            $(a.target).next()[0].style.display = "none";
          } else {
            // $(a.target).next().slideDown();

            $(a.target).next()[0].style.display = "block";
          }
        }
      }
    },
    quit() {
      let that = this;
      this.showQuit = !this.showQuit;
      setTimeout(function () {
        that.showQuit = !that.showQuit;
      }, 5000);
    },
    async clickQuit() {
      let res = await service({
        method: "post",
        url: "/system/logout",
      });
      if (res.status == "SUCCESS") {
        ElMessage({
          message: "退出成功！",
          type: "success",
        });
        this.$router.push("/");
        // localStorage.removeItem("userAndPass");
        sessionStorage.removeItem("Publickey");
        sessionStorage.removeItem("menu");
        sessionStorage.removeItem("token");
        sessionStorage.removeItem("url");
        sessionStorage.removeItem("titleName");
        sessionStorage.removeItem("changeName");
        sessionStorage.removeItem("userName");
        sessionStorage.removeItem("role");
      }
    },
    changeTableSize() {
      let windowWidth = window.innerWidth;

      if (windowWidth < 630) {
        this.tableWidth = window.innerWidth - 10 + "px";
      } else if (windowWidth >= 630) {
        if (this.icon == "Expand") {
          this.tableWidth = window.innerWidth - 120 + "px";
        } else {
          this.tableWidth = window.innerWidth - 220 + "px";
        }
      }
    },
    changeNaveColor(ele) {
      if (ele.className.includes("menu1Class")) {
        sessionStorage.setItem(
          "activeLine",
          JSON.stringify({
            class: 1,
            name: ele.children[1].innerHTML,
          })
        );
      } else if (ele.className.includes("childSon")) {
        sessionStorage.setItem(
          "activeLine",
          JSON.stringify({
            class: 2,
            name: ele.innerHTML,
          })
        );
      } else if (ele.className.includes("grandSon")) {
        if (JSON.parse($(ele).attr("data-text"))[0].id == 70) {
          sessionStorage.setItem(
            "activeLine",
            JSON.stringify({
              class: 3,
              name: ele.innerHTML + "1",
            })
          );
        } else if (JSON.parse($(ele).attr("data-text"))[0].id == 78) {
          sessionStorage.setItem(
            "activeLine",
            JSON.stringify({
              class: 3,
              name: ele.innerHTML + "2",
            })
          );
        } else {
          sessionStorage.setItem(
            "activeLine",
            JSON.stringify({
              class: 3,
              name: ele.innerHTML,
            })
          );
        }
      }

      let grandSon = $(".grandSon");

      for (let i = 0; i < grandSon.length; i++) {
        grandSon[i].style.background = "#0470C1";
      }

      let childSon = $(".childSon");
      for (let i = 0; i < childSon.length; i++) {
        childSon[i].style.background = "#0470C1";
      }

      let menu = $(".menu1");
      for (let i = 0; i < menu.length; i++) {
        menu[i].style.background = "#0470C1";
      }

      let menu1 = $(".menu2");
      for (let i = 0; i < menu1.length; i++) {
        menu1[i].style.background = "#0470C1";
      }

      ele.style.background = "#03518c";
    },
  },

  created() {
    let pathList = JSON.parse(sessionStorage.getItem("url"));
    let realPath = window.location.hash.slice(2);
    pathList.forEach((element) => {
      if (element.path == realPath) {
        sessionStorage.setItem("changeName", element.name);
      }
    });
  },
  beforeMount() {
    this.menuList = JSON.parse(sessionStorage.getItem("menu"));

    for (let i = 0; i < this.menuList.length; i++) {
      for (let j = 0; j < this.iconList.length; j++) {
        if (this.menuList[i].name.includes(this.iconList[j].name)) {
          this.menuList[i].icon = this.iconList[j].icon;
        }
      }
    }

    if (this.icon == "Expand") {
      this.iconSize = 30;
      this.menu = "menu2";
      this.changeLeft = "child2";
      this.naveLeft = false;
      this.left = "left2";
      $(".child").hide();
      // this.changeTableSize();
    } else {
      this.iconSize = 20;
      this.menu = "menu1";
      this.left = "left1";
      this.changeLeft = "child1";
      this.naveLeft = true;
      $(".child").hide();
      // this.changeTableSize();
    }
  },

  mounted() {
    let that = this;

    this.locale = zhCn;
    if (sessionStorage.getItem("titleName")) {
      this.navName = sessionStorage.getItem("titleName");
    }
    this.userName = sessionStorage.getItem("userName");
    EventBus.on("custom-event", function (res) {
      that.navName = res;
    });
    $(".menu1").click(function () {
      let th = this;

      let left = $(".left").width();
      if (left <= 75) {
        if (th.children[1].innerHTML == "首页") {
          that.changeNaveColor(th);

          that.$router.replace({
            path: "/" + $(this).attr("data-text"),
            query: { t: Date.now() },
          });
        } else {
          return;
        }
      }
      // this.style.background = "#03518c";
      that.changeNaveColor(th);
      let num = $(this).attr("data-text");

      if (num == 1) {
        if (that.icon == "Fold") {
          if ($(this).next()[0].style.display == "none") {
            // $(this).next().slideDown();
            $(this).next()[0].style.display = "block";
            $(this).next()[0].style.height = "";
          } else {
            $(this).next()[0].style.display = "none";
            $(this).next()[0].style.height = "";
            // $(this).next().slideUp();
          }
        }
      } else {
        if ($(this).attr("data-text")) {
          // that.$router.push("/" + $(this).attr("data-text"));
          that.$router.replace({
            path: "/" + $(this).attr("data-text"),
            query: { t: Date.now() },
          });

          that.changeName = this.children[1].innerHTML;

          // sessionStorage.setItem(
          //   "active",
          //   JSON.stringify({
          //     index: 1,
          //     name: th.children[1].innerHTML,
          //   })
          // );
        } else {
          let text = this.children[1].innerHTML;
          for (let i = 0; i < that.menuList.length; i++) {
            if (that.menuList[i].name == text) {
              that.changeName = that.menuList[i].name;
              that.menuList[i].childrenList.forEach((element) => {
                if (element.name == "查看") {
                  // that.$router.push("/" + element.path);
                  that.$router.replace({
                    path: "/" + element.path,
                    query: { t: Date.now() },
                  });
                }
              });
            }
          }
        }
      }
    });
    $(".grandSon").click(function () {
      let path = JSON.parse($(this).attr("data-text"));

      path.forEach((item) => {
        if (item.name == "查看") {
          path = item.path;
        }
      });
      // sessionStorage.setItem(
      //   "active",
      //   JSON.stringify({
      //     index: 3,
      //     name: this.innerHTML,
      //   })
      // );
      that.changeNaveColor(this);
      // this.style.background = "#03518c";
      // that.$router.push("/" + path);
      that.$router.replace({
        path: "/" + path,
        query: { t: Date.now() },
      });
    });
    $(".menu").mouseleave(function () {
      let width = $(".left").width();
      if (width == 60) {
        // $(".child").hide();
      }
    });

    $(".menu1Class").hover(function () {
      let width = $(".left").width();
      if (width == 60) {
        let num = $(this).attr("data-text");
        if (num == 1) {
          $(".child").hide();
          $(this).next().slideDown().stop();
          // $(".childLine").css({
          //   display: "flex",
          //   aligItem: "center",
          //   // justifyContent: "baseline",
          //   // paddingLeft: "20px",
          // });
          $(".childSon").css({
            width: "175px",
          });
          $(".grandSon").css({
            width: "175px",
          });
          $(".grandSonInner").css({ display: "none" });
          $(".child").css({ height: "" });
        } else {
          $(".child").hide();
          $(".childLine").css({
            display: "block",
          });
        }
      }
    });

    if (window.innerWidth < 630) {
      $(".left").hide();
      this.icon = "Expand";
      $(".changeButton").css({
        position: "relative",
        left: "0px",
        top: 0,
      });
      $(".NavChangeName").css({
        position: "relative",
        left: "0px",
        top: 0,
      });
    }
    window.addEventListener("resize", function () {
      let width = $(".left").width();
      EventBus.emit("width", width);
      let windowWidth = window.innerWidth;
      if (windowWidth > 880) {
        that.changeLeftSize = true;
        document.getElementsByClassName("left")[0].style = "block";
        that.icon = "Fold";
      } else if (windowWidth > 630) {
        document.getElementsByClassName("left")[0].style = "block";
        that.icon = "Fold";
        if (this.icon == "Expand") {
          this.iconSize = 30;
          this.menu = "menu2";
          this.changeLeft = "child2";
          this.naveLeft = false;
          this.left = "left2";
          // $(".child").hide();
        } else {
          this.iconSize = 20;
          this.menu = "menu1";
          this.left = "left1";
          this.changeLeft = "child1";
          this.naveLeft = true;

          // $(".child").hide();
        }
      } else if (windowWidth < 630) {
        that.icon = "Expand";
        $(".changeButton").css({
          position: "relative",
          left: "0px",
          top: 0,
        });
        $(".NavChangeName").css({
          position: "relative",
          left: "0px",
          top: 0,
        });
        $(".left").fadeOut();
      }
      EventBus.on("custom-event", function (res) {
        that.navName = res;
      });
    });
    try {
      this.activedLine = JSON.parse(sessionStorage.getItem("activeLine"));

      let level = this.activedLine.class;
      let name = this.activedLine.name;
      if (level == 1) {
        let levelClass = $(".menu1Class");
        for (let i = 0; i < levelClass.length; i++) {
          if (levelClass[i].children[1].innerHTML == name) {
            levelClass[i].style.background = "rgb(3, 81, 140)";
          }
        }
      } else if (level == 2) {
        let levelClass = $(".childSon");
        for (let i = 0; i < levelClass.length; i++) {
          if (levelClass[i].innerHTML == name) {
            levelClass[i].style.background = "rgb(3, 81, 140)";
            levelClass[i].parentElement.parentElement.style.display = "block";
          }
        }
      } else if (level == 3) {
        let levelClass = $(".grandSon");
        for (let i = 0; i < levelClass.length; i++) {
          if (name == "客户信息1") {
            let role = sessionStorage.getItem("role");
            if (role == 1 || role == 2) {
              levelClass[17].style.background = "rgb(3, 81, 140)";
              levelClass[17].parentElement.style.display = "block";
              levelClass[17].parentElement.parentElement.parentElement.style.display =
                "block";
            } else {
              levelClass[9].style.background = "rgb(3, 81, 140)";
              levelClass[9].parentElement.style.display = "block";
              levelClass[9].parentElement.parentElement.parentElement.style.display =
                "block";
            }
          } else if (name == "客户信息2") {
            let role = sessionStorage.getItem("role");
            if (role == 1 || role == 2) {
              levelClass[19].style.background = "rgb(3, 81, 140)";
              levelClass[19].parentElement.style.display = "block";
              levelClass[19].parentElement.parentElement.parentElement.style.display =
                "block";
            } else {
              levelClass[11].style.background = "rgb(3, 81, 140)";
              levelClass[11].parentElement.style.display = "block";
              levelClass[11].parentElement.parentElement.parentElement.style.display =
                "block";
            }
          } else if (levelClass[i].innerHTML == name) {
            levelClass[i].style.background = "rgb(3, 81, 140)";
            levelClass[i].parentElement.style.display = "block";
            levelClass[
              i
            ].parentElement.parentElement.parentElement.style.display = "block";
          }
        }
      }
    } catch (error) {}
    EventBus.on("sendClass", function (res) {
      let level = res.class;
      let name = res.name;
      if (level == 1) {
        let levelClass = $(".menu1Class");
        for (let i = 0; i < levelClass.length; i++) {
          if (levelClass[i].children[1].innerHTML == name) {
            that.removeColor();
            levelClass[i].style.background = "rgb(3, 81, 140)";
          }
        }
      } else if (level == 2) {
        let levelClass = $(".childSon");
        for (let i = 0; i < levelClass.length; i++) {
          if (levelClass[i].innerHTML == name) {
            that.removeColor();
            levelClass[i].style.background = "rgb(3, 81, 140)";
            levelClass[i].parentElement.parentElement.style.display = "block";
          }
        }
      } else if (level == 3) {
        let levelClass = $(".grandSon");
        for (let i = 0; i < levelClass.length; i++) {
          if (levelClass[i].innerHTML == name) {
            that.removeColor();
            levelClass[i].style.background = "rgb(3, 81, 140)";
            levelClass[i].parentElement.style.display = "block";
            levelClass[
              i
            ].parentElement.parentElement.parentElement.style.display = "block";
          }
        }
      }
    });
  },
};
</script>
<style lang="less" scoped>
* {
  user-select: none;
}
.tableAuto.el-table .cell {
  white-space: nowrap;
}
.table {
  margin: auto;
  margin-top: 10px;
}
body {
  width: 100vw !important;
  height: 100vh !important;
}

.addfile {
  width: 100%;
  height: 40px;
  font-size: 0;
}
.addfile::file-selector-button {
  width: 100%;
  height: 4vh;
  background-color: #1e9fff;
  border: 1px solid #1e9fff;
  border-radius: 3px;
  cursor: pointer;
  color: #fff;
  font-size: 1vw;
}
.fileName {
  font-size: 1vw;
  color: black;
  height: 3vh;
  line-height: 3vh;
  width: 100%;
  text-align: center;
}

.upContain {
  width: 60%;
  margin: auto;
  margin-top: 3vh;
  display: flex;
  align-items: center;
  justify-content: center;
  // flex-direction: column;
}
.upFileSrue {
  width: 60%;
  height: 3vh;
  margin: auto;
  margin-top: 2vh;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .buttonUpdata {
    outline: none;
    border: none;
    width: 40%;
    border-radius: 0.5vh;
    height: 3vh;
    background: #ebebeb;
    color: white;
  }
  .buttonUpdata1 {
    background: #94d474;
  }
}
.button {
  font-size: 1vw;
}

.menuInner {
  position: relative;
}
.contain {
  color: white;
  font-size: 1vw;
  display: flex;
  // overflow: hidden;
  .left1 {
    width: 175px;
    height: 100%;
    background: #0470c1;
    // overflow: auto;
    .Logo {
      width: 100%;
      height: 7vh;
      background: #0470c1;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      .logoName {
        width: 90px;
        // overflow: hidden;
        padding-left: 5px;
        font-size: 35px;
        line-height: 40px;
        font-weight: 800;
      }
      .name {
        width: 70px;
        // padding: 0 5%;
        letter-spacing: 2px;
        margin-left: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 800;
        line-height: 16px;
        font-size: 15px;
      }
    }
    .menu {
      width: 100%;
      height: 93vh;
      // padding-top: 10%;
      // padding-left: 5%;
      overflow: auto;
      color: #b4b6bd;
      overflow-x: hidden;
      // background: #213e8e;
      cursor: pointer;
    }
  }

  .left2 {
    width: 60px;
    height: 100%;
    background: #0470c1;
    // overflow: hidden;
    .Logo {
      width: 100%;
      height: 7vh;
      background: #0470c1;
      display: flex;
      align-items: center;
      // justify-content: space-between;
      .logoName {
        width: 90px;
        // overflow: hidden;
        padding: 0 10px;
        font-size: 34px;
        line-height: 50px;
        font-weight: 800;
      }
      .logoName1 {
        width: 60px;
        text-align: center;
        font-size: 20px;
        line-height: 40px;
        font-weight: 800;
      }
      .menu {
        width: 100%;
        height: 93vh;
        // padding-top: 10%;
        // padding-left: 5%;
        overflow: auto;
        color: #b4b6bd;
        overflow-x: hidden;
        // background: #213e8e;
        cursor: pointer;
      }
    }
    .menu {
      width: 100%;
      height: 93vh;
      color: #b4b6bd;
      cursor: pointer;
    }
  }
  .rigth {
    flex-grow: 1;
    height: 100vh;
    // background: blue;
    .rightTop {
      width: 100%;
      height: 7vh;
      display: flex;
      // background: #3359c7;
      align-items: center;
      justify-content: space-between;
      .topLeft {
        width: 460px;
        display: flex;
        align-items: center;
        height: 100%;
        .changeButton {
          position: static;
          top: 0;
          left: 0;
          margin-left: 10px;
          width: 40px;
          height: 2.8vh;
          color: #777676;
        }
        .NavChangeName {
          // margin-left: 10px;
          position: "static";
          margin-top: -3px;
          font-size: 20px;
          color: #777676;
          width: 140px;
          font-weight: 800;
          display: flex;
          align-items: center;
          justify-content: flex-start;
        }
        .search {
          width: 270px;
          height: 60%;
          font-size: 20px;
          background: #ebebeb;
          display: flex;
          align-items: center;
          .smallSearch {
            width: 30px;
            display: flex;
            height: 100%;
            font-size: 15px;
            line-height: 40px;
            color: #365488;
            margin-left: 0.5vw;
          }
          .arrow {
            width: 20px;
            height: 100%;
            color: #365488;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          .input {
            width: 180px;
            height: 100%;
            margin-left: 10px;

            input {
              width: 100%;
              height: 100%;
              outline: none;
              color: #365488;
              border: none;
              background: #ebebeb;
              font-size: 15px;
            }
            .inputWord::-webkit-input-placeholder {
              color: #365488;
            }
          }
        }
      }
      .topRight {
        width: 150px;
        height: 100%;
        display: flex;
        position: relative;
        align-items: center;
        // background: red;
        .bell,
        .share {
          color: #3359c7;
          position: relative;
          display: flex;
          align-items: center;
          .messageCircle {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: red;
            color: white;
            position: absolute;
            top: -2.4vh;
            left: 0vw;
            transform: scale(0.5);
          }
        }

        .avater {
          width: 150px;
          height: 100%;
          // background: red;
          display: flex;
          align-items: center;
          .pic {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            overflow: hidden;
            img {
              width: 100%;
              height: 100%;
            }
          }
          .userName {
            margin-left: 10px;
            width: 90px;
            height: 100%;
            position: relative;
            display: flex;
            align-items: center;
            color: #777676;
            font-size: 15px;
          }
        }
        .quit {
          width: 150px;
          text-align: center;
          line-height: 40px;
          background: #777676;
          position: absolute;
          z-index: 100000;
          color: white;
          font-size: 20px;
          right: 0px;
          top: 7vh;
        }
      }
    }
    .rightInner {
      width: 100%;
      height: 93%;
      overflow: auto;
      background: #ebebeb;
    }
  }
}

.menu::-webkit-scrollbar {
  width: 5px; /* 对于垂直滚动条，设置宽度 */
  // height: 12px; /* 对于水平滚动条，设置高度 */
}

/* 滚动条轨道 */
.menu::-webkit-scrollbar-track {
  background: #0470c1; /* 背景颜色 */
}

/* 滚动条滑块 */
.menu::-webkit-scrollbar-thumb {
  background: #044c84; /* 滑块颜色 */
}

/* 滑块hover效果 */
// .menu1::-webkit-scrollbar-thumb:hover {
//   background: #555; /* 滑块hover颜色 */
// }
.menu1 {
  padding-left: 5px;
  width: 175px;
  font-weight: 600;
  display: flex;
  align-items: center;
  // justify-content: center;
  height: 40px;
  // background: red;
  .indexIcon {
    line-height: 3vh;
  }
  .navName {
    // padding-left: 10px;

    width: 100%;
    line-height: 40px;
    text-indent: 10px;
    height: 100%;
    font-size: 15px;
    color: white;
    font-weight: 600;
  }
}
.childSon {
  width: 100%;
  height: 40px;
  text-indent: 30px;
  line-height: 40px;
  font-size: 15px;
  color: white;
  // background: "#0470C1";
  font-weight: 600;
}
.grandSon {
  width: 100%;
  height: 40px;
  text-indent: 45px;
  line-height: 40px;
  font-size: 15px;
  color: white;
  font-weight: 600;
}
.menu2 {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}
// .menu1:hover {
//   background: #035fa4;
//   color: white;
//   border-left: 2px solid white;
//   padding-left: 8px;
// }

.child1,
.child2 {
  width: 100%;
  background: #0470c1;
  // text-align: center;

  .childLine {
    width: 175px;
    // padding-left: 15px;
    color: white;
    height: 40px;
    text-indent: 15px;
    // text-align: center;
    line-height: 40px;
    font-size: 15px;
    background: #0470c1;
  }
  .childLine:hover {
    // background: #163fb1;
    text-indent: 13px;
    border-left: 2px solid white;
    color: white;
    background: #035fa4;
  }
}
.child1 {
  text-indent: 0px;
  position: static;
  font-weight: 600;
}
.child2 {
  width: 175px;
  height: auto;
  position: absolute;
  left: 60px;
  top: 15px;
  z-index: 1000000000;
  font-weight: 600;
}

@media (min-width: 629px) and(max-width: 880px) {
  .bell,
  .share {
    display: none !important;
  }
  .changeButton {
    position: static !important;
    top: 0;
    left: 0;
  }

  .topRight {
    width: 170px !important;
  }
  .topLeft {
    width: 230px !important;
  }
}
@media (min-width: 0px) and(max-width: 629px) {
  .contain {
    overflow: hidden;
  }
  .bell,
  .share {
    display: none !important;
  }
  .left {
    position: absolute !important;
    left: 0;
    top: 0;
    z-index: 1000;
  }
  .search {
    margin-left: 10px !important;
  }
  .rightTop {
    width: 95% !important;
  }
  .userName {
    display: none !important;
  }
  .topRight {
    width: 50px !important;
  }
  .topLeft {
    width: 230px !important;
  }
}
</style>